<template>
  <div class="t-icon">
    <van-icon 
      :name="name" 
      :dot="dot"
      :badge="t_badge"
      :color="color"
      :size="size" 
      :classPrefix="classPrefix"
    />
    <div v-if="label" :style="{'font-size':t_labelSize}">{{label}}</div>
  </div>
</template>

<script lang="ts">
import {request,is} from "@/utils"
import { defineComponent,ref ,onMounted} from 'vue'
export default defineComponent({
  name: 'tIcon',
  props: {
    name: {
      type: String,
      default: 'ellipsis'
    },
    label: [String,Number],
    dot: {
      type: Boolean,
      default: false
    },
    badge: {
      type: [String,Number],
      default: ''
    },
    color: {
      type: String,
      default: 'inherit'
    },
    size: {
      type: [String,Number],
      default: 30
    },
    labelSize: {
      type: [String,Number],
      default: 0.3
    },
    classPrefix: {
      type: String,
      default: 'van-icon'
    },
    url: {
      type: String,
      default: ''
    }
  },
  setup (props,context) {
    const {labelSize,url,badge} = props;
    const t_badge = ref(badge)
    const t_labelSize = is(labelSize,'Number')?(labelSize+'rem'):labelSize
    if(url){//请求接口之后赋值
      t_badge.value = '10';
    }
    onMounted(()=>{
      if(url){
        request({
          url: url,
          method: 'get'
        }).then(res=>{
          t_badge.value = res.result;
        })
      }
    })
    return {
      t_badge,
      t_labelSize
    }
  },
})
</script>

<style lang="scss">
.t-icon{
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  .van-icon{
    line-height: 0;
    vertical-align: middle;
    &::before{
      line-height: 30px;
    }
  }
}
</style>